<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@page import="org.json.JSONArray"%>
<%@page import="org.json.JSONObject"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<link rel='stylesheet' type='text/css' href='${initParam.root }/css/mentoring.css' />
<c:set value="${sessionScope.mvo }" var="mvo"></c:set>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
var dataLength;
	$(function(){
		
		showNote(${requestScope.map.nlist});
   	//	 $("#noteList").scrollTop($("#noteList")[0].scrollHeight);
   		setInterval('reloadNote()',1000);
   	
   	$("#sendBtn").click(function(){
   		var content=$("textarea");
   		if(content.val()!=""){
   		$.ajax({
   			url:"${initParam.root}/mentoring/sendNote.do",
   			data:$("#sendNoteForm").serialize(),
   			dataType:"json",
   			success:function(data){
   				content.val("");
   				showNote(data);
   			}
   			
   		});
   		}
   	});
   		$("#noteBody").on("click",".sDeleteBtn",function(e){
   		 var no=$(this).attr('href');
   			if(confirm("삭제?")){
   				$.ajax({
   					url:"${initParam.root }/mentoring/senderDeleteNote.do",
   					data:"no="+no+"&uid=${requestScope.map.uid}",
   					dataType:"json",
   					success:function(data){
   						showNote(data);
   					}
   				});
   			}
			return false;
   		}).on("click",".rDeleteBtn",function(){
   			var no=$(this).attr('href');
   			if(confirm("삭제?")){
   				$.ajax({
   					url:"${initParam.root }/mentoring/receiverDeleteNote.do",
   					data:"no="+no+"&uid=${requestScope.map.uid}",
   					dataType:"json",
   					success:function(data){
   						showNote(data);
   					}
   				});
   			}
			return false;
   		});
   		
   		$("#contentBox").keyup(function(e){
   			if(e.keyCode==13){
   				$("#sendBtn").click();
   			}
   		});
   		
	});
	
	function showNote(data){
		
		var str="";
		$.each(data,function(i,a){
			var nowDate=a.sendDate.split('/');
			if(i==0||data[i-1].sendDate.split('/')[0]!=nowDate[0]){
				str+="	<tr><td></td><td><font class='notRead'>-----------------------------------------"+nowDate[0];
				str+="------------------------------------------</font></td><td></td></tr>";	
			}
			str+="<tr>";
			if(a.sender.id=="${sessionScope.mvo.id}"){
				str+="<td></td><td class='contentalign'>";
				if(a.receiveDate!=null&&(data.length-1==i||data[i+1].receiveDate==null))
					str+="<pre>(읽음 : "+a.receiveDate+")";
				str+="<a href="+a.no+" class='sDeleteBtn'}'>x</a>";
				if(a.receiveDate==null){
					str+="<font class='notRead'>"+a.content+"</font>";
				}else{
					str+=a.content+"</pre>";
				}
				str+="</td><td>ME / "+nowDate[1]+"</td>";		
			}else{
				str+="<td style='text-align: right'>"+nowDate[1]+" / ${requestScope.map.uid}</td>";
				str+="	<td><pre>"+a.content+"<a href="+a.no+" class='rDeleteBtn'>x</a></pre></td><td></td>";
			}
			str+="</tr>";
			
		});
		$("#noteBody").html(str);
		if(dataLength!=data.length)
			 $("#noteList").scrollTop($("#noteList")[0].scrollHeight);
		dataLength=data.length;
	}
	
	function reloadNote(){
		$.ajax({
			url:"${initParam.root}/mentoring/getNoteListAjax.do",
			data:"uid=${requestScope.map.uid}",
			dataType:"json",
			success:function(data){
				showNote(data);
			}
			
		});
	}
</script>

<h1 align="center">with ${requestScope.map.uid }</h1><br>

<div id="note" align="center">

<div id="noteList">
	<table id="noteListTable">
		<tbody id="noteBody">
		</tbody>
	</table>
</div>
<div id="sendNote">
<form id="sendNoteForm">
<input type="hidden" name="receiver.id" value="${requestScope.map.uid }">
		<textarea rows="5" cols="10" style="margin: 4px 0px 0px; width: 380px; height: 50px; resize:none" name="content" id="contentBox"></textarea>
		<input type="button" value="SEND" id="sendBtn">
</form>
</div>
</div>
